<template>
    <a-card>
        <a-row>
            <a-col><h3>&nbsp;</h3></a-col>
        </a-row>
        <a-row>
            <a-col :span="8">&nbsp;</a-col>
            <a-col :span="8" style="text-align: center;">
                <a-input-search v-model='keyWords' @press-enter="getAllAdmins" size="large" :style="{width:'320px'}"
                                placeholder="管理员名称" button-text="搜索" search-button/>
            </a-col>
            <a-col :span="8">&nbsp;</a-col>
        </a-row>
        <a-row>
            <a-col>&nbsp;</a-col>
        </a-row>
        <a-row :gutter="12" align="start" justify="center">
            <template v-for="(item,index) in admins" :key="item.id">
                <a-col :span="8">
                    <a-card style="text-align: center;">
                        <h3>{{item.name}}</h3>
                        <div style="width:72px;height: 72px;border:1px solid var(--color-neutral-4);border-radius: 36px;overflow: hidden;margin: 0px auto;">
                            <a-image :src="item.userFace" width="100%" height="100%"></a-image>
                        </div>
                        <p>{{item.username}}</p>
                        <p>手机号: {{item.phone}}</p>
                        <p>电话号: {{item.telphone}}</p>
                        <p>地址: {{item.address}}</p>
                        <div>
                            用户状态:
                            <a-switch v-model="item.enabled" @change="handleChangeEnabled(item)">
                                <template #checked>
                                    启用
                                </template>
                                <template #unchecked>
                                    禁用
                                </template>
                            </a-switch>
                        </div>
                        <p>备注:{{item.remark}}</p>
                        <div>
                            用户角色:
                            <a-select @change="changeRoles(item)" v-model="item.defaultRoles"
                                      placeholder="Please select ..." multiple>
                                <a-option v-for="(role,index) in allRoles" :key="role.id"
                                          :tag-props="{color:role.name==='ROLE_NORNAL'?'red':''}"
                                          :value="role.id" :label="role.name">
                                </a-option>
                            </a-select>
                        </div>
                    </a-card>
                </a-col>
            </template>
        </a-row>
    </a-card>
</template>

<script>
    import {IconPlus} from '@arco-design/web-vue/es/icon'

    export default {
        name: "",
        components: {IconPlus},
        data() {
            return {
                loading: false,
                admins: [],
                keyWords: '',
                allRoles: []
            }
        },
        methods: {
            initAllRoles() {
                this.$get(this.requestUrl.getAllRolesInAdmin.url).then(res => {
                    this.allRoles = res.obj
                })
            },
            getAllAdmins() {
                this.loading = true
                this.$get(this.requestUrl.getAllAdmins.url + '?keyWords=' + this.keyWords).then(res => {
                    for (let item of res.obj) {
                        let defaultRoles = []
                        for (let role of item.roles) {
                            defaultRoles.push(role.id)
                        }
                        item.defaultRoles = defaultRoles
                    }
                    this.admins = res.obj
                    this.loading = false
                })
            },
            handleChangeEnabled(value) {
                this.updateAdmin(value)
            },
            updateAdmin(admin) {
                this.$put(this.requestUrl.updateAdmin.url, admin).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllAdmins()
                    }
                })
            },
            changeRoles(admin) {
                let haveNORMAL = false
                for (let rId of admin.defaultRoles) {
                    if (rId === 2) {
                        haveNORMAL = true
                        break
                    }
                }
                if (!haveNORMAL) {
                    admin.defaultRoles.push(2)
                }
                this.$put(this.requestUrl.updateAdminRoles.url + '?adminId=' + admin.id + '&rids=' + admin.defaultRoles).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllAdmins()
                    }
                })
            },
            updateAdminRoles() {

            },
        },
        mounted() {
            this.getAllAdmins()
            this.initAllRoles()
        }
    }
</script>

<style scoped>

</style>
